<template>
    <div class="classifyBar bg-gradient-to-r from-gray-100 to-gray-200 min-h-screen p-8">
      <div class="mb-4">
        <h2 class="text-2xl font-extrabold mb-2 text-gray-900">促销活动</h2>
        <div class="flex flex-wrap gap-2">
          <button 
            v-for="promotion in promotions" 
            :key="promotion.id" 
            @click="handlePromotionClick(promotion)"
            class="px-4 py-2 bg-zinc-800 rounded-lg shadow-md hover:bg-zinc-700 transition-colors duration-200 text-black"
          >{{ promotion.title }}</button>
        </div>
      </div>
      <div class="mt-8">
        <h2 class="text-2xl font-extrabold mb-2 text-gray-900">兴趣推荐</h2>
        <div class="flex flex-wrap gap-2">
          <button 
            v-for="interest in interests" 
            :key="interest.id" 
            @click="handleInterestClick(interest)"
            class="px-4 py-2 bg-zinc-800 rounded-lg shadow-md hover:bg-zinc-700 transition-colors duration-200 text-black"
          >{{ interest.title }}</button>
        </div>
      </div>
    </div>
</template>
  
  <script>
  export default {
    data() {
      return {
        promotions: [
        { id: 1, title: '生活节' },
        { id: 2, title: '防暑季' },
        { id: 3, title: '聚广东' },
        { id: 4, title: '运动日' },
        { id: 5, title: '焕新装' },
        { id: 6, title: '进口日' },
        { id: 7, title: '图书周' },
        { id: 8, title: '影音盛宴' },
        { id: 9, title: '健康养生月' },
        { id: 10, title: '家居改造计划' },
        { id: 11, title: '智能硬件特惠' },
        { id: 12, title: '旅游出行季' }
          
        ],
        interests: [
        { id: 1, title: '居家' },
        { id: 2, title: '穿搭' },
        { id: 3, title: '美食' },
        { id: 4, title: '数码' },
        { id: 5, title: '护肤' },
        { id: 6, title: '户外' },
        { id: 7, title: '运动' },
        { id: 8, title: '摄影装备' },
        { id: 9, title: '手工艺品' },
        { id: 10, title: '宠物用品' },
        { id: 11, title: '办公学习' },
        { id: 12, title: '汽车配件' },
        { id: 13, title: '玩具与游戏' },
        { id: 14, title: '乐器与音响' }
        ],
      };
    },
    methods: {
      handlePromotionClick(promotion) {
        console.log(`Clicked on promotion: ${promotion.title}`);
        // 在这里处理点击促销活动的逻辑
      },
      handleInterestClick(interest) {
        console.log(`Clicked on interest: ${interest.title}`);
        // 在这里处理点击兴趣推荐的逻辑
      },
    },
  };
  </script>
  
<style>
@import "https://cdn.jsdelivr.net/npm/tailwindcss@^2/dist/tailwind.min.css";
.button-hover {
  transition: all 0.3s ease;
}

.button-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.classifyBar{
    margin: 4.5rem 0 0 0;
}

@media (max-width: 768px) {
    .classifyBar{
    margin: 4rem 0 0 0;
}
 }

</style>